<template>
    <div class="detail">
        <SavePage v-loading="loading" :title="info.number">
            <!-- 审批显示操作按钮 -->
            <template v-if="type === 'plan'" slot="buttons">
                <BaseButton v-permission="{ btnCode: 'dlyh_c7_d13_2' }" :disabled="info.status === 1" @click="handelEdit()">编辑</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c7_d14_2' }" :disabled="info.status === 1" @click="handelDelete()">删除</BaseButton>
            </template>
            <template slot="body">
                <el-divider></el-divider>
                <div class="info">
                    <div class="sub-title">基础信息</div>
                    <el-form ref="refForm" size="medium" label-width="200px">
                        <el-row :gutter="24">
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="巡查类型：">
                                    <span>{{ info.typeName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="重复周期：">
                                    <span>{{ info.repetitionPeriod }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="巡查部门：">
                                    <span>{{ info.deptName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="公路名称：">
                                    <span>{{ info.highwayName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :lg="8" :xl="6">
                                <el-form-item label="巡查路段：">
                                    <span v-if="!info.startStake1">-</span>
                                    <span v-else>K{{ info.startStake1 }}+{{ info.endStake1 }}~K{{ info.startStake2 }}+{{ info.endStake2 }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="type === 'plan'" :lg="8" :xl="6">
                                <el-form-item label="开始执行日期：">
                                    <span>{{ info.firstInspectDate }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="type === 'plan'" :lg="8" :xl="6">
                                <el-form-item label="创建人员：">
                                    <span>{{ info.createUserName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="type === 'plan'" :lg="8" :xl="6">
                                <el-form-item label="创建部门：">
                                    <span>{{ info.createDepName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="type === 'plan'" :lg="8" :xl="6">
                                <el-form-item label="创建时间：">
                                    <span>{{ info.createTime }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="type === 'task'" :lg="8" :xl="6">
                                <el-form-item label="任务生成日期：">
                                    <span>{{ info.startDate }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="type === 'task'" :lg="8" :xl="6">
                                <el-form-item label="任务截止日期：">
                                    <span>{{ info.endDate }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="type === 'task'" :lg="8" :xl="6">
                                <el-form-item label="任务状态：">
                                    <span :class="colorMap[info.status]">{{ info.statusName }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-divider></el-divider>
                    <div>
                        <div class="sub-title">巡查内容</div>
                        <el-checkbox-group v-model="checkList" class="check-box">
                            <div class="check-list">
                                <div v-for="(item, index) in patrolContent" :key="index" class="check-item">
                                    <el-checkbox :label="item" disabled></el-checkbox>
                                </div>
                            </div>
                        </el-checkbox-group>
                    </div>
                    <!-- 如果是巡查任务，且是已完成状态 -->
                    <div v-if="type === 'task' && info.status === 4">
                        <el-divider></el-divider>
                        <div class="sub-title">巡查记录</div>
                        <BaseButton type="text" @click="handleDetail">点击查看详情<i class="el-icon-d-arrow-right"></i></BaseButton>
                    </div>
                </div>
            </template>
        </SavePage>
    </div>
</template>

<script>
import { InspectionPlanModel, InspectionTaskModel } from '@/models'
import useSuccess from '@/hooks/useSuccess'
import { patrolContent } from '../../../constants'
const modelMap = {
    plan: 'planModel',
    task: 'taskModel'
}
export default {
    name: 'PlanDetail',
    data() {
        return {
            planModel: new InspectionPlanModel(),
            taskModel: new InspectionTaskModel(),
            id: this.$route.query.id,
            type: this.$route.query.type || 'plan',
            info: {},
            checkList: ['选中且禁用', '复选框 A'],
            loading: true,
            colorMap: {
                1: '',
                2: 'color-red',
                3: 'color-yellow',
                4: 'color-green'
            }
        }
    },
    computed: {
        patrolContent() {
            return patrolContent
        }
    },
    created() {
        this.detail()
    },
    methods: {
        handleDetail() {
            this.$router.push({name: 'RecordDetail', query: {taskNumber: this.info.number}})
        },
        detail() {
            // 用于计划详情、任务详情两个地方
            this[modelMap[this.type]]
                .detail({ id: this.id })
                .then((res) => {
                    this.info = res
                    this.checkList = res.content
                })
                .finally(() => {
                    this.loading = false
                })
        },
        back() {
            this.$router.go(-1)
        },
        handelEdit() {
            this.$router.push({
                path: './edit',
                query: {
                    id: this.id
                }
            })
        },
        handelDelete() {
            this.planModel.delete({ id: this.id }).then((res) => {
                useSuccess({ message: '删除成功', routeName: '', onlyTip: false })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #0162ff;
    border-color: #0162ff;
}
.detail {
    width: 100%;
    // padding:0 20px ;
    .title {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
            font-size: 14px;
            font-weight: 600;
        }
        .btn {
            width: 20%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    }
    .info {
        .sub-title {
            font-size: 14px;
            font-weight: 600;
        }
        .check-box {
            margin-top: 20px;
            .check-list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                .check-item {
                    width: 33%;
                    margin: 4px 0;
                }
            }
        }
    }
}
</style>
